<ui:composition 
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">          
     
    <p:dataGrid id="dgCatalogo" var="i" value="#{catalogoBean.catalogo}" columns="3" rows="15"
                rendered="#{catalogoBean.tipoVista == 'P' and not empty catalogoBean.catalogo}"
                paginator="true"
                paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                rowsPerPageTemplate="15,30,45"
                emptyMessage="No se encontraron productos" styleClass="vistaPanel">

        <!--
        <f:facet name="header">
            
            <h:panelGroup layout="block" rendered="#{not usuarioSessionBean.estaRegistrado}">
               <div style="width: 100%; float:right; position:relative;" >

                <div style="float: left; position: relative;
                     width: 250px; 
                     text-align: right;
                     padding-top: 6px;" >

                    Ver precios expresados en:
                    
                </div>

                <div style="float: left; position: relative;
                     width: 180px; height: 22px;">

                    <p:selectOneMenu id="moneda" value="#{monedaBean.moneda}" rendered="#{not empty monedaBean.moneda}" style="width:160px; text-align: left;"
                                 converter="#{conversorBean.conversorMoneda}" >
                        <f:selectItems value="#{monedaBean.lista}" var="m" itemLabel="#{m.descrp}(#{m.cotizacion})" itemValue="#{m}" />
                        <p:ajax update="moneda, :formulario:divDetalle " process="@this"  />
                    </p:selectOneMenu>
                </div>

                <div style="float: left; position: relative;
                     width: 300px;
                     vertical-align: middle;
                     padding-top: 6px;" >

                    <h:outputText value="+ de 500 Productos encontrados" styleClass="headerTable"
                                  rendered="#{catalogoBean.cantidadRegistros>=500}" />

                    <h:outputText value="#{catalogoBean.cantidadRegistros} Productos encontrados" styleClass="headerTable"
                                  rendered="#{500>catalogoBean.cantidadRegistros}" />
                </div>
                </div>
            </h:panelGroup>
        </f:facet>
        -->

        <f:facet name="footer">

                <h:outputText value="+ de 500 Productos encontrados" styleClass="headerTable"
                              rendered="#{catalogoBean.cantidadRegistros==500}"/>

                <h:outputText value="#{catalogoBean.cantidadRegistros} Productos encontrados" styleClass="headerTable"
                              rendered="#{500>catalogoBean.cantidadRegistros}" />
        </f:facet>

        <p:panel style="text-align:center; width: 245px; " >
            
            <div style="text-align: center; position: relative; width: 100%; min-height:470px; height: auto; ">

                <div style="text-align: center; position: relative; width: 100%; ">            
                 
                    <div id="divFavorito" class="contIconFav" >
                        <p:commandButton  icon="iconoFavorito" style="width:25px; height:20px;"
                                       rendered="#{usuarioSessionBean.estaRegistrado and not i.favorito}"
                                       title="Agregar a favoritos"
                                       actionListener="#{favoritosBean.agregarFavorito(i)}" 
                                       update=":formulario:gCatalogo, :formulario:dgCatalogo" >
                        </p:commandButton> 

                        <p:commandButton  icon="iconoFavoritoOk" style="width:25px; height:20px;"                                  
                                       actionListener="#{favoritosBean.eliminarFavorito(i)}"
                                       title="Quitar de favoritos"
                                       rendered="#{usuarioSessionBean.estaRegistrado and  i.favorito}" 
                                       update=":formulario:gCatalogo, :formulario:dgCatalogo" >
                        </p:commandButton>                
                    </div>
                    
                    <p:tooltip for="imgPrd" rendered="#{not empty i.imggra}">
                        <p:graphicImage  width="400" height="auto" value="#{aplicacionBean.parametro.pathImagenesProductos}#{i.imggra}.jpg" alt="Imagen producto Intercap Argentina"  />
                    </p:tooltip>

                    <p:graphicImage id="imgPrd" styleClass="imgProductoPanel"
                                    value="#{aplicacionBean.parametro.pathImagenesProductos}#{i.imgchi}.jpg" 
                                    rendered="#{not empty i.imgchi}" alt="Imagen producto Intercap Argentina" />

                    <p:graphicImage value="#{aplicacionBean.parametro.pathImagenesProductos}intercap.jpg" 
                                    rendered="#{empty i.imgchi}"
                                    style="border: 1px solid lightgrey;"
                                    styleClass="imgProductoPanel" alt="Imagen producto Intercap Argentina"
                                    />
                </div>

                <div style="text-align: center; position: relative; width: 100%;min-height: 30px;
                     margin-top: 5px; margin-bottom: 5px;">
                     <h:graphicImage value="#{aplicacionBean.parametro.pathImagenesDefault}/iconos/new.gif" rendered="#{i.pnuevo=='S'}"/>
                     <span itemprop="makesOffer"><h2><h:outputText value="#{i.descrp}"/></h2></span>                    
                </div>

                <div class="infoProdVP">
                    <h:panelGrid columns="2" columnClasses="colLabel,colDato" style="width: 100%" >

                            <h:outputText value="Código:" />
                            <h:panelGroup>
                                <h:outputText value="#{i.codigo}" /> <br/>
                                <h:outputText value="(#{i.nroParte})" rendered="#{not empty i.nroParte}" />
                            </h:panelGroup>

                            <h:outputText value="Presentación:" />
                            <h:outputText value="#{i.unidadConversion} #{i.factorConversion} #{i.unidadMedida}" />
                            
                            <h:outputText value="Marca:" />
                            <h:outputText value="#{i.marca}" />

                            <h:outputText value="Stock" rendered="#{usuarioSessionBean.estaRegistrado}"  />
                            <h:panelGroup rendered="#{usuarioSessionBean.estaRegistrado}" > 

                                <h:outputText value="A pedido" rendered="#{1 > i.stockTotal and not(i.productoApedido=='S')and(i.pnuevo=='S')}" />
                                
                                <h:graphicImage value="#{aplicacionBean.parametro.pathImagenesDefault}/iconos/stock-bajo.gif" width="14" height="30"
                                                rendered="#{1 > i.stockTotal and not(i.productoApedido=='S') and (i.pnuevo=='N') }" />

                                <h:graphicImage value="#{aplicacionBean.parametro.pathImagenesDefault}/iconos/stock-medio.gif" width="14" height="30"
                                                 rendered="#{(i.stockMinimo >=  i.stockTotal ) and ( i.stockTotal > 0 ) and not(i.productoApedido=='S')}" />
                                <h:graphicImage value="#{aplicacionBean.parametro.pathImagenesDefault}/iconos/stock-alto.gif" width="14" height="30"
                                                 rendered="#{i.stockTotal > i.stockMinimo and not(i.productoApedido=='S') }" />

                                 <h:outputText value="A pedido" rendered="#{i.productoApedido=='S'}" />
                                 
                                 <h:outputText style="font-size:10px; float:left; position:relative;" value="Stock próximo a agotarse" rendered="#{(i.stockMinimo >=  i.stockTotal ) and ( i.stockTotal > 0 ) and not(i.productoApedido=='S')}"/>
                                 
                            </h:panelGroup>

                            <h:outputText value="$ Venta c/I.V.A.: " rendered="#{usuarioSessionBean.estaRegistrado}" />
                            <h:panelGroup rendered="#{usuarioSessionBean.estaRegistrado}" >
                                <h:outputText value="#{i.precioFinal*monedaBean.cotizacionDelDia.cotizacion/monedaBean.moneda.cotizacion}"
                                              rendered="#{i.moneda == 'USD'}" 
                                              style="#{i.conVariacionPrecio=='S'?'font-weight: bold; color: #0066cc;':''}" >
                                        <f:convertNumber pattern=" ##,##0.00" />
                                </h:outputText>

                                <h:outputText value="#{i.precioFinal/monedaBean.moneda.cotizacion}"
                                              rendered="#{i.moneda == 'ARS'}" 
                                              style="#{i.conVariacionPrecio=='S'?'font-weight: bold; color: #0066cc;':''}" >
                                        <f:convertNumber pattern=" ##,##0.00" />
                                </h:outputText>
                                
                                <h:graphicImage id="varpre" value="#{aplicacionBean.parametro.pathImagenesDefault}/iconos/icono-variacion.png" rendered="#{i.conVariacionPrecio=='S'}"
                                    style="margin-left: 2px;"/>
                                <p:tooltip for="varpre" value="Este producto ha sufrido variación de precios en los últimos 30 días"
                                    style="width: 200px;"/>
                            </h:panelGroup>


                            <h:outputText value="$ Marcado c/I.V.A.: " rendered="#{catalogoBean.porcMarcacion>0 and usuarioSessionBean.estaRegistrado}" />
                            
                            <h:outputText value="#{i.precioFinal*monedaBean.cotizacionDelDia.cotizacion/monedaBean.moneda.cotizacion + ((i.precioFinal*monedaBean.cotizacionDelDia.cotizacion/monedaBean.moneda.cotizacion)*catalogoBean.porcMarcacion/100 )   }"
                                          rendered="#{i.moneda == 'USD' and catalogoBean.porcMarcacion>0 and usuarioSessionBean.estaRegistrado }" style="font-weight: bold;"  >
                                    <f:convertNumber pattern=" ##,##0.00" />
                            </h:outputText>

                            <h:outputText value="#{i.precioFinal/monedaBean.moneda.cotizacion + ((i.precioFinal/monedaBean.moneda.cotizacion)*catalogoBean.porcMarcacion/100 )   }"
                                          rendered="#{i.moneda == 'ARS' and catalogoBean.porcMarcacion>0 and usuarioSessionBean.estaRegistrado}" style="font-weight: bold;" >
                                    <f:convertNumber pattern=" ##,##0.00" />
                            </h:outputText>

                        </h:panelGrid>

                </div>

           <div style="text-align:center; position: relative; width: 100%;
                     margin-top: 5px; margin-bottom: 5px;">

           <p:column  styleClass="colOpProdP" style="font-size: 9.5px; text-align: center;"  width="80">
           <div class="opProd">                        
                <div class="divagregar">
                    <p:commandButton  id="btnAgregarP" icon="btnAgregar" style="top:0% !important;   margin-right:5px;" 
                                  onclick="window.location.href='../login-alta/'"
                                  title="Agregar este producto al carrito de compras"
                                  rendered="#{not usuarioSessionBean.estaRegistrado and not i.seleccionado}"
                                   >

                    </p:commandButton> 

                   <p:commandButton  id="btnAgregar" icon="btnAgregar" style="top:0% !important;   margin-right:5px;"
                                      action="#{catalogoBean.verConfirmarCantidad(i)}"
                                      process="@this"
                                      update=":formulario:confirmarCantidad"
                                      title="Agregar este producto al carrito de compras"
                                      rendered="#{usuarioSessionBean.estaRegistrado and not i.seleccionado}"
                                      oncomplete="PF('dlgCantidad').show(); btnAceptar.focus(); " >

                    </p:commandButton>


                    <p:commandButton  id="btnDelete" icon="btnDelete" style="top:0% !important;"
                                      action="#{catalogoBean.seleccionarItemCatalogo(i,true)}"
                                      process="@this"
                                      update=":formulario:confirmarBorrado"
                                      title="Borrar este producto del carrito de compras"
                                      rendered="#{usuarioSessionBean.estaRegistrado and (i.seleccionado)}"
                                      oncomplete="PF('dlgConfirmarBorrado').show(); btnBorrar.focus()">
                    </p:commandButton>
                </div>

               
               <div class="btnPanel">
                   <div class="btnOpc">

                        <div class="btnSustitutos" style="position: absolute; right:30px;">
                            <p:commandButton id="btnSustitutos" icon="btnSustitutosI" styleClass="btnSustitutos"                             
                                             disabled="#{i.tieneSustitutos == 'N'}"
                                             title="Ver productos sustitutos/sugeridos"
                                             actionListener="#{catalogoBean.seleccionarItemCatalogo(i,true)}"
                                             update=":formulario:verSustitutos,:formulario:bannersVerticales"
                                             oncomplete="PF('dlgSustitutos').show()"
                                             process="@this" >
                            </p:commandButton>
                        </div>

                        <div class="btnRelacionados" style="position: absolute; right:5px;">
                            <p:commandButton id="btnRelacionados" icon="btnRelacionadosI" styleClass="btnSugeridos"                             
                                             disabled="#{i.tieneSugeridos == 'N'}"
                                             title="Ver productos relacionados"
                                             actionListener="#{catalogoBean.seleccionarItemCatalogo(i,true)}"
                                             update=":formulario:verSugeridos,:formulario:bannersVerticales"
                                             oncomplete="PF('dlgSugeridos').show()"
                                             process="@this" >
                            </p:commandButton>
                        </div>

                        <div class="btnPendiente" style="position: absolute; right:5px; bottom:0px;"  >
                            <p:commandButton id="btnPendiente" icon="btnPendientesI" styleClass="btnPendientes"
                                             rendered="#{usuarioSessionBean.estaRegistrado}"
                                             disabled="#{i.tienePendiente == 'N'}"
                                             title="Este producto se encuentra en sus pedidos pendientes"
                                             actionListener="#{catalogoBean.verProductosPendientes(i)}"
                                             process="@this"
                                             update=":formulario:pedidosPendientes"
                                             oncomplete="PF('dlgPedidosPendientes').show();" >
                            </p:commandButton>
                        </div>

                        <div class="btnMasInfo" style="position: absolute; right:30px; bottom:0px;" >
                            <p:commandButton id="btnFichaProducto" icon="btnMasInfoI" styleClass="btnMasInfo"
                                             title="Ver la ficha del producto"
                                             action="#{catalogoBean.verFichaProducto(i)}"                             
                                             process="@this" >
                            </p:commandButton>            
                        </div>

                   </div>

               </div>
            
            </div>

        </p:column>


           </div>

            </div>
            
        </p:panel>

    </p:dataGrid>


</ui:composition>
